import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { ElConfigProvider } from 'element-plus'
import { defineComponent, ref, onMounted } from "vue"

import { fetchUsers } from "@/apis/index"

import PageTable from "@/packages/pageTable/index"
import SearchBar from './packages/searchBar'
import { FormItemPorps, FormProps } from "@/packages/searchBar/type"

import type { PaginationProps } from "element-plus/es/components/pagination/src/pagination"
interface TableDataItem {
  [key: string]: any;  
}
// interface User extends TableDataItem {  
//   date: string,
//   name: string,
//   address: string,
//   id: number
// }   

export default defineComponent(
  {
    components:{ PageTable },
    setup(){
      const size = 'small';
      const zIndex = 3000;
      const buttonConfig = {
        autoInsertSpace: true,
      }
      const messageConfig = {
        max: 3,
      }
  
      const tableData = ref([
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
          id:1
        },
      ]) 
      const tableProps = {
        cellClassName:'cell-name',
        rowStyle: (data: { row: TableDataItem, rowIndex: number}) => {
          if(data?.row?.id === 2){
            return {
              color: 'red'
            }
          }else{
            return {
              color: '#000'
            }
          }
        },
      };
      const columns  = [
        { 
          label:'日期',
          prop:'date',
          align:'left',
          headerSlots: () => (<h3>日期</h3>),
          defaultSlots:(row: TableDataItem) => (<h2>{row?.date}</h2>)
        },
        {
          label:'名称',
          prop:'name',
          align:'center',
          headerSlots: () => (<h3>名称</h3>),
          defaultSlots:(row: TableDataItem) => (<h2>{row?.name}</h2>)
        },
        {
          label:'地址',
          prop:'address',
          align:'center',
          headerSlots: () => (<h1>地址</h1>),
          defaultSlots:(row: TableDataItem) => (<h2>{row?.address}</h2>)
        }
      ]
      
      const requestTableDataMethod = async () => {
        const res = await fetchUsers({ name:"111", date:'2016-05-03'});
        tableData.value = res?.data
      }

      const paginationProps: Partial<PaginationProps> = {
        size: 'default',
        pageSizes:[10, 20, 30, 50],
        layout: "total, sizes, prev, pager, next, jumper"
      }

      onMounted(() => {
        requestTableDataMethod()
      })


      const formSetPorps: Array<FormItemPorps> = [
        { 
          component:'ElInput',
          label:"名称",
          prop: "name",
          labelWidth:100,
        },
        { 
          component:'ElSelect',
          label:"描述信息",
          prop: "desc",
          labelWidth:200,
        }
      ]

      const formData = {
        name:'',
        desc:''
      }

      return () => (
        <ElConfigProvider
          locale={zhCn}
          size={size}
          z-index={zIndex}
          button={buttonConfig}
          message={messageConfig}
          value-on-clear={() => null}
          empty-values={[undefined, null]}
        >  
          <SearchBar formSetPorps={formSetPorps} formData={formData}></SearchBar>
          <PageTable
            tableProps={tableProps} 
            tableData={tableData.value} 
            columns={columns}
            paginationProps={paginationProps}
          >
          </PageTable>
        </ElConfigProvider>
      )
    }
  }
) 





